$baseFontSize: 40px !default;
$red: #D71345 !default;
$fontRed: #E61E4B !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}

@mixin displayflex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($size:1) {
  -webkit-box-flex: $size;
  -moz-box-flex: $size;
  -webkit-flex: $size;
  -ms-flex: $size;
  flex: $size;
}

@mixin flexflowCol($direction:column,$dir:vertical) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin border-radius($radius:4px) {
  -webkit-border-radius: rem($radius);
  -moz-border-radius: rem($radius);
  -ms-border-radius: rem($radius);
  -o-border-radius: rem($radius);
  border-radius: rem($radius);
}

@mixin box-sizing($set:border-box) {
  -webkit-box-sizing: $set;
  -moz-box-sizing: $set;
  -ms-box-sizing: $set;
  -o-box-sizing: $set;
  box-sizing: $set;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-family: "方正粗圆简体", Helvetica, sans-serif;
  -webkit-touch-callout: none;
  @include box-sizing(border-box);
  outline: none;
}

a:active, a:hover, a:link, a:visited {
  text-decoration: none;
  outline: none;
}
html,body{
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-color: #F5F5F5;
}
body {
  position: absolute;
  left:0;
  top: 0;
  right: 0;
  bottom:0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

img {
  display: block;
  width: 100%;
}

ul, li {
  list-style: none;
}

.confirm-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9998;
  background-color: rgba(69, 69, 69, .60);
  visibility: hidden;
  opacity: 0;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}

.confirm-bg.confirm-bg-visible {
  visibility: visible;
  opacity: 1;
}

.confirm-msg {
  opacity: 0;
  -webkit-transform: translate3d(0, -50%, 0) scale(1.185);
  transform: translate3d(0, -50%, 0) scale(1.185);
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  &.in {
    opacity: 1;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transfrom: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
  &.out {
    opacity: 0;
    z-index: 10999;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: translate3d(0, 0, 0) scale(0.815);
    transform: translate3d(0, 0, 0) scale(0.815);
  }
  left: 50%;
  top: 50%;
  margin-left: rem(-250px);
  z-index: 9999;
  position: absolute;
  width: rem(500px);
  .confirm-msg-title {
    border-top-left-radius: rem(10px);
    border-top-right-radius: rem(10px);
    background-color: white;
    height: rem(69px);
    border-bottom: 1px solid #EBEBF5;
    line-height: rem(69px);
    text-align: center;
    font-size: rem(34px);
    color: $fontRed;
  }
  .confirm-msg-content {
    background-color: white;
    padding: rem(20px) rem(26px);
    border-bottom-left-radius: rem(10px);
    border-bottom-right-radius: rem(10px);
    border-bottom: rem(10px) solid #E61E4B;
    &.has-btn {
      border: 0;
      border-radius: 0;
    }
    p {
      color: #4F545B;
      font-size: rem(28px);
    }
  }
  .confirm-msg-btns {
    @include displayflex;
    @include flexflowRow(row, horizontal);
    border-top: 1px solid #E4E4E4;
    padding: rem(7px) 0;
    background: white;
    border-bottom-left-radius: rem(10px);
    border-bottom-right-radius: rem(10px);
    span {
      display: block;
      @include flex(1);
      height: rem(74px);
      line-height: rem(74px);
      font-size: rem(28px);
      text-align: center;
      box-sizing: border-box;
      color: #4F545B;
    }
    span:first-child {
      color: $fontRed;
    }
    span + span {
      border-left: 1px solid #E4E4E4;
    }
  }
  .confirm-msg-close {
    margin: rem(60px) auto 0;
    width: rem(58px);
    height: rem(58px);
    background: url(/old/images/close.png) no-repeat;
    background-size: rem(58px);
  }
}

.alert-msg {
  position: absolute;
  z-index: 10000;
  top: 40%;
  margin-left: -6.75rem;
  text-align: center;
  opacity: 0;
  left: 50%;
  color: white;
  background-color: rgba(0, 0, 0, .65);
  padding: rem(28px) rem(64px);
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
  font-size: rem(28px);
  border-radius: rem(6px);
  -webkit-transform: translate3d(0, 0, 0) scale(1.185);
  transform: translate3d(0, 0, 0) scale(1.185);
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  box-sizing: border-box;
}

.alert-msg.in {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

.alert-msg.out {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0.815);
  transform: translate3d(0, 0, 0) scale(0.815);
}

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  left: 0;
  top: 0;
  z-index: 100;
  background: -moz-linear-gradient(top, #b51a21, #d31c42);
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b51a21), to(#d31c42));
  background: -o-linear-gradient(top,#b51a21,#d31c42);
  .header{
    width: 100%;
    min-height: rem(297px);
    img{
      width: 100%;
      height: 100%;
    }
  }
  .content{
    padding: 0 rem(22px) rem(50px) rem(30px);
    background: -moz-linear-gradient(top, #c41c33,#d31c42);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c41c33), to(#d31c42));
    background: -o-linear-gradient(top,#c41c33,#d31c42);
    .notice{
      padding: rem(16px) rem(6px) rem(16px) rem(16px);
      font-size: rem(24px);
      line-height: rem(36px);
      color: #fff;
      background-color: #ff3851;
      @include border-radius(8px);
      background: url(https://images.simpletour.com/activity/homeinns/daub@3x.png) no-repeat center;
      background-size: cover;
    }
    form{
      padding: rem(26px) 0 rem(52px);
      text-align: center;
      input,span{
        display: inline-block;
        width: rem(482px);
        height: rem(62px);
        margin: 0 auto;
        border: none;
        outline: none;
        @include border-radius(8px);
      }
      input{
        text-indent: rem(16px);
      }
      span{
        color: #fff;
        line-height: rem(62px);
        font-size: rem(28px);
        background-color: #ff8942;
        margin-top: rem(16px);
        &.disabled{
          background-color:#939393;
        }
      }
    }
    .discount{
      position: relative;
      padding: rem(34px) rem(16px) rem(6px);
      font-size: rem(24px);
      color: #fff;
      line-height: rem(36px);
      background-color: #b51329;
      margin-bottom: rem(44px);
      @include border-radius(8px);
      .title{
        position: absolute;
        top: rem(-20px);
        left: rem(-32px);
        display: block;
        width: rem(304px);
        height: rem(42px);
        background: url(https://images.simpletour.com/activity/homeinns/titleBar1@3x.png) no-repeat center;
        background-size: contain;
        text-indent: -9999px;
      }
      &.second{
        padding: rem(34px) rem(16px) rem(27px);
        margin-bottom: 0;
        .title{
          width: rem(321px);
          background: url(https://images.simpletour.com/activity/homeinns/titleBar2@3x.png) no-repeat center;
          background-size: contain;
        }
      }
      .info{
        p{
          padding-bottom: rem(24px);
        }
        .bold{
          font-weight: bold;
        }
        .line-through{
          text-decoration: line-through;
        }
      }
      .code{
        text-align: center;
        &:nth-child(2){
          margin-left: rem(16px);
        }
        img{
          width: rem(306px);
          height: rem(306px);
          @include border-radius(4px);
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
}